/**
 * 万能 REM 适配方案
 * 设计稿尺寸与 REM 换算公式：1rem = 设计稿宽度 / 10
 * 示例：若设计稿为 750px，则 1rem = 75px
 */
(function flexible(window, document) {
  // 获取 HTML 元素
  const docEl = document.documentElement;

  // 获取设备像素比，用于高清屏处理
  const dpr = window.devicePixelRatio || 1;

  // 调整 body 字体大小和清晰度
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + 'px';
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 设置根元素字体大小
  function setRemUnit() {
    // 设计稿基准宽度（请根据实际设计稿修改）
    const baseWidth = 750;

    // 计算根元素字体大小（基准字体 = 设计稿宽度 / 10）
    const rem = docEl.clientWidth / (baseWidth / 100);

    // 设置根元素字体大小
    docEl.style.fontSize = rem + 'px';
  }

  // 初始化设置
  setRemUnit();

  // 监听窗口大小变化，重新计算
  window.addEventListener('resize', setRemUnit);

  // 监听页面方向变化，重新计算
  window.addEventListener('orientationchange', setRemUnit);

  // 解决部分浏览器加载后尺寸计算问题
  window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // 检测 0.5px 支持，用于高清屏幕的 1px 边框
  if (dpr >= 2) {
    const fakeBody = document.createElement('body');
    const testElement = document.createElement('div');
    testElement.style.border = '.5px solid transparent';
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);

    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines');
    }

    docEl.removeChild(fakeBody);
  }
})(window, document);
